<template>
  <view class="nav-bar">
    <view class="logo-section">
      <!-- <view v-if="showBack" class="back-button" @click="goBack">
        <text class="back-icon">←</text>
      </view> -->
      <text class="back-icon" v-if="showBack" @click="goBack">←</text>

      <text class="header-title">生命故事盒子</text>
    </view>
    <view class="user-info" @click="handleUserClick">
      <image class="avatar" :src="avatarSrc" mode="aspectFill"></image>
      <text class="user-name">{{ userName || '请登录' }}</text>
    </view>
    <!-- <slot></slot> -->
  </view>
  <view class="part-title">
    <text class="part-text">{{ title }}</text>
  </view>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      localUserName: ''
    }
  },
  props: {
    title: {
      type: String,
      default: '故事合集'
    },
    avatarSrc: {
      type: String,
      default: '/static/avatar-default.png'
    },
    showBack: {
      type: Boolean,
      default: false
    },
    userName: {
      type: String,
      default: ''
    },
    isLoggedIn: {
      type: Boolean,
      default: false
    }
  },
  created() {
    // 初始化时获取用户信息
    this.updateUserInfo();
    // 监听存储变化
    uni.$on('storage-changed', this.updateUserInfo);
  },
  destroyed() {
    // 组件销毁时移除监听
    uni.$off('storage-changed', this.updateUserInfo);
  },
  methods: {
    updateUserInfo() {
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo && userInfo.userName) {
        this.localUserName = userInfo.userName;
      } else {
        this.localUserName = '';
      }
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    handleUserClick() {
      if (!this.isLoggedIn) {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      } else {
        uni.navigateTo({
          url: '/pages/userCenter/profile'
        });
      }
    }
  },
  computed: {
    displayName() {
      return this.localUserName || this.userName || '请登录';
    }
  }
}
</script>

<style>
.nav-bar {
  padding: 20rpx 30rpx;
  background: linear-gradient(135deg, #46bba0, #23804b);
  /* background: linear-gradient(135deg, #52c41a, #3ca50e); */
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 100;
}

.logo-section {
  display: flex;
  align-items: center;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
  cursor: pointer;
}

.back-icon {
  font-family: 'iconfont';
  font-size: 40rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
  cursor: pointer;
}

.header-title {
  font-size: 40rpx;
  padding-left: 10rpx;
  font-weight: bold;
  color: #fff !important;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);
}

.user-info {
  /* width: 210rpx !important; */
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 8rpx 16rpx;
  border-radius: 40rpx;
  transition: all 0.3s;
}

.user-info:active {
  background-color: rgba(255, 255, 255, 0.25);
  transform: scale(0.98);
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-right: 10rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid rgba(255, 255, 255, 0.8);
}

.user-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff !important;
  letter-spacing: 1rpx;
}

.part-title {
  padding: 30rpx 40rpx 20rpx;
  background-color: #f8f8f8;
  border-bottom: 2rpx solid #eaeaea;
}

.part-text {
  font-size: 34rpx;
  font-weight: bold;
  color: #000;
  position: relative;
  display: inline-block;
  padding-left: 24rpx;
}

.part-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  /* background-color: var(--primary-color); */
  background-color: #2e8b57;
  border-radius: 4rpx;
}
</style>